<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>优惠券</title>
    <style>
        .c {
            width: 100%;
            padding: 0;
            margin-bottom: 7%;
            background-image: url("img/coupon.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .c-c {
            text-align: right;
        }

    </style>
    <script src="js/alert.js"></script>
</head>
<body>
<div id="data" style="padding-top: 5%">
    <div class="c">
        <div class="c-c">
            <h2>优惠券</h2>
            <h3>券号：23523</h3>
            <h3>金额：200</h3>
            <h3>有效期至：2020-11-11</h3>
        </div>
    </div>
    <div class="c">
        <div class="c-c">
            <h2>优惠券</h2>
            <h3>券号：23523</h3>
            <h3>金额：200</h3>
            <h3>有效期至：2020-11-11</h3>
        </div>
    </div>
    <div class="c">
        <div class="c-c">
            <h2>优惠券</h2>
            <h3>券号：23523</h3>
            <h3>金额：200</h3>
            <h3>有效期至：2020-11-11</h3>
        </div>
    </div>
</div>


</body>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            "url": "/vip/coupon/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var data = json.data;
                console.log(data);
                $("#data").empty();
                for (var i = 0; i < data.length; i++) {
                    var html = "<div class='c'>" +
                        "    <div class='c-c'>" +
                        "        <h2>优惠券</h2>" +
                        "        <h3>券号：" + data[i].code + "</h3>" +
                        "        <h3>金额：" + data[i].money + "</h3>" +
                        "        <h3>有效期至：" + data[i].valid + "</h3>" +
                        "    </div>" +
                        "</div>";
                    $("#data").append(html);
                }
            }
        })
    });
</script>
</html>